<script setup lang='ts'>
import { ref } from 'vue';

const currentPage = ref(1)
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
</script>

<template>
    <img class="w-[1920px] h-[300px]"
        src="http://image.fast.126net.cn/group1/M00/03/37/wKgwBWN0csGAJZhRAAMKJhGyS3w337.jpg" />
    <div class="w-[780px] flex mx-auto mt-1 border-b-[1px] pb-1">
        <div class="w-[50%]">
            <img src="http://image.fast.126net.cn/group1/M00/03/D4/wKgBS1tRtJOAAgqnAAQXoKu6ZA4888.png" />
            <div class="text-[12px] leading-[35px]">
                关注新闻关注孩子的动态
            </div>
            <div class="text-[11px] whitespace-pre-wrap">
                实事关注孩子的动态，可看孩子在幼儿园的状况是否良好，我们公正公开的教育让家长们放心。
            </div>
        </div>
        <div class="w-[50%] px-[10px]">
            <div class="border-b-[1px]" v-for="(i, index) in   2  " :key="i">
                <div class="flex text-[14px]" :class="{ 'mt-[10px]': index > 0 }">
                    <div class="text-[#333] cursor-pointer hover:text-[rgb(126,179,248)]">22名大学生支教乡村幼儿园</div>
                    <div class="flex-grow"></div>
                    <div>07-20</div>
                </div>
                <div class="flex text-[11px] my-[15px]">
                    <div class="w-[90%] line-clamp-4 cursor-pointer hover:text-[rgb(126,179,248)]">
                        新华社南昌7月4日电（记者郭强）为解决“入园难、入园贵”问题，江西南昌今年将实施第三期学前教育行动计划，力争到2020年，基本建成覆盖城乡、布局合理的学前教育公共服务网络，普惠性幼儿园覆盖率达到85%以上。
                    </div>
                    <div class="flex-c w-[10%]">
                        <el-icon size="20px">
                            <Right />
                        </el-icon>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="w-[750px] mx-auto mt-[15px]">
        <div class="flex border-b-[1px] py-[10px] border-dashed" v-for="i in 5" :key="i + 'k'">
            <div class="flex-c w-[10%]">
                <div class="text-center w-[75px] h-[75px] p-[10px] bg-gray-100">
                    <div class="text-[18px]">20</div>
                    <div class="text-[14px]">2018-09</div>
                </div>
            </div>
            <div class="flex-grow"></div>
            <div class="text-[14px] w-[85%]">
                <div class="text-[14px] hover:text-[rgb(126,179,248)] cursor-pointer">幼儿园禁授小学课程，给娃选幼儿园又有新标准！</div>
                <div class="text-[11px] w-[90%] hover:text-[rgb(126,179,248)] cursor-pointer line-clamp-3">
                    19日,记者从教育部获悉:2017年**教育事业发展统计公报显示,2017年,幼儿园教职工419.29万人,比上年增加37.50万人,,增长9.82%;专任教师22017年,幼儿园教职工419.29万人,比上年增加37.50万人,增长9.82%;专任教师243.21万人,比上年增加20.01万人43.21万人,比上年增加20.01万人,增长8.96%;学前教育毛入园率达到79.6%,比上年提,增长9.82%;专任教师22017年,幼儿园教职工419.29万人,比上年增加37.50万人,增长9.82%;专任教师243.21万人,比上年增加20.01万人43.21万人,比上年增加20.01万人,增长8.96%;学前教育毛入园率达到79.6%,比上年提增长9.82%;专任教师22017年,幼儿园教职工419.29万人,比上年增加37.50万人,增长9.82%;专任教师243.21万人,比上年增加20.01万人43.21万人,比上年增加20.01万人,增长8.96%;学前教育毛入园率达到79.6%,比上年提高
                </div>
            </div>
        </div>
    </div>
    <div class="flex-c my-[15px]">
        <el-pagination prev-text="上一页" next-text="下一页" v-model:current-page="currentPage" :page-size="5" :small="false"
            :background="true" layout="total, prev, pager, next" :total="100" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
    <div class="h-[50px] text-white leading-[50px] bg-[rgb(0,0,0,0.7)] text-center">
        2024 鹿鸣湖幼儿园版权所有
    </div>
</template>

<style lang='scss' scoped></style>
